<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <link rel="stylesheet" type="text/css" href="/assets/iview-2.0/dist/styles/iview.css"></link>
    <script src="/assets/js/vue.js"></script>
    <script src="/assets/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/iview-2.0/dist/iview.js"></script>
</head>
<body>
<div id="app">
    <template>
        <Row>
            <i-col span="6">
                <img v-bind:src="detail.thumb" style="width:300px"/>
            </i-col>
            <i-col span="8">
                <div><h3>{{detail.title}}</h3></div>
                <div><p>年份:{{detail.year}}</p></div>
                <div><p>地区:{{detail.area}}</p></div>
                <div><p>导演:{{detail.director}}</p></div>
                <div><p>演员:{{detail.actors}}</p></div>
                <div><p>简介:{{detail.introduction}}</p></div>
            </i-col>
        </Row>
        <Row>
            <i-col span="24">
                <div v-for="(v,k) in plays">
                    <h2>{{k}}:</h2>
                    <div style="width: 100%;display: grid;grid-template-columns: auto auto auto auto auto auto;
                      grid-template-rows: auto auto auto;grid-gap: 10px 20px;justify-items:center;align-items:center">
                        <i-button size="large" shape="circle" @click="goto(k,index)"  v-for="(item,index) in v">{{item.part}}</i-button>
                    </div>
                </div>
            </i-col>
        </Row>
    </template>
</div>

<script>
    function getCookie(key) {
        var str="";
        document.cookie.split(";").forEach(function (v, i) {
            if(v.includes(key)){
                str=v.substring(v.indexOf("=")+1);
            }
        });
        return str;
    }
    var base_url="http://"+location.host+"/public";
    var video_id=getCookie("video_id");
    var vm=new Vue({
        el:"#app",
        data:{
           detail:{},
           plays:{}
        },
        methods:{
            goto:function (k, v) {
                var item=this.plays[k][v];
                var url="";
                if(item.url.endsWith(".html")){
                    url=item.url;
                }else {
                    if(item.source.parse==""){
                        url="https://api.123zx.net/m3u8.php?url=";
                    }else{
                        url=item.source.parse+item.url;
                    }
                }
                console.log("url:"+url);
                window.open(url);
            }
        }
    });
    if(video_id==""){
        console.log("video_id不存在");
        alert("video_id不存在");
    }else {
        $.ajax({
            url:base_url+"/video/detail/"+video_id,
            type:"GET",
            dataType:"json",
            success:function (res) {
                console.log(res);
                vm.$data.detail=res;
            }
        });
        $.ajax({
            url:base_url+"/play/group/"+video_id,
            type:"GET",
            dataType:"json",
            success:function (res) {
                res.forEach(function (v,i) {
                    if(vm.$data.plays[v.from]==undefined){
                        //vm.$data.plays[v.from]=[];
                        vm.$set(vm.$data.plays,v.from,[]);
                    }
                    vm.$data.plays[v.from].push(v);
                });
                console.log(vm.$data.plays);
            }
        });
    }
</script>
</body>
</html>